三款富文本编辑器推荐：TuiEditor & Vditor & Milkdown
概述
在组件库项目中，富文本编辑是常见的内容管理需求。本节对比分析多款开源富文本编辑器，从功能丰富度、Markdown 支持、UI 颜值、维护活跃度等维度进行评估，最终推荐课程中集成使用的编辑器方案。
编辑器类型分类
| 类型 | 全称 | 说明 |
|---|---|---|
| WYSIWYG | What You See Is What You Get | 所见即所得，编辑时即呈现最终效果 |
| Markdown 编辑器 | — | 通过 Markdown 语法编写，支持实时预览 |
| 混合模式 | — | 同时支持 WYSIWYG 和 Markdown 模式切换 |
编辑器对比
Quill
npm install quill
bash
<template>
<div ref="editorRef"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
const editorRef = ref<HTMLElement>()
onMounted(() => {
new Quill(editorRef.value!, {
theme: 'snow',
placeholder: '请输入内容...',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }],
[{ list: 'ordered' }, { list: 'bullet' }],
['link', 'image', 'video'],
['clean']
]
}
})
})
</script>
vue
特点：轻量级 WYSIWYG 编辑器，不支持 Markdown 语法输入，适合简单的富文本场景。
Toast UI Editor (TuiEditor)
npm install @toast-ui/editor
bash
<template>
<div ref="editorRef"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
const editorRef = ref<HTMLElement>()
onMounted(() => {
const editor = new Editor({
el: editorRef.value!,
initialEditType: 'markdown', // 'markdown' | 'wysiwyg'
previewStyle: 'vertical', // 'vertical' | 'tab'（分栏/标签页预览）
height: '500px',
toolbarItems: [
['heading', 'bold', 'italic', 'strike'],
['hr', 'quote'],
['ul', 'ol', 'task', 'indent', 'outdent'],
['table', 'link'],
['code', 'codeblock']
]
})
})
</script>
vue
特点：功能全面，支持 Markdown + WYSIWYG 双模式切换，支持表格、代码块等丰富内容。
Vditor（课程推荐）
npm install vditor
bash
import Vditor from 'vditor'
import 'vditor/dist/index.css'
const vditor = new Vditor('vditor', {
height: 500,
mode: 'ir', // 'ir' 即时渲染 | 'sv' 分屏 | 'wysiwyg' 所见即所得
placeholder: '请输入内容...',
toolbar: [
'headings', 'bold', 'italic', 'strike', '|',
'list', 'ordered-list', 'check', '|',
'quote', 'code', 'inline-code', '|',
'link', 'upload', 'table', '|',
'undo', 'redo', '|',
'fullscreen', 'preview'
],
cache: { enable: false },
preview: {
markdown: {
toc: true
}
},
after: () => {
console.log('Vditor initialized')
}
})
typescript
特点：浏览器端 Markdown 编辑器，支持三种编辑模式（即时渲染、分屏预览、所见即所得），功能丰富且 UI 美观。
Milkdown
npm install @milkdown/core @milkdown/vue
bash
import { Editor, rootCtx, defaultValueCtx } from '@milkdown/core'
import { commonmark } from '@milkdown/preset-commonmark'
import { nord } from '@milkdown/theme-nord'
import { VueEditor, useEditor } from '@milkdown/vue'
// 基于 ProseMirror 的插件化编辑器
// 特点：高度可扩展、TypeScript 原生支持
typescript
特点：基于 ProseMirror 的插件化 Markdown 编辑器，高度可定制，适合需要深度定制的场景。
综合对比
| 维度 | Quill | TuiEditor | Vditor | Milkdown |
|---|---|---|---|---|
| 类型 | WYSIWYG | Markdown + WYSIWYG | Markdown 三模式 | Plugin-based Markdown |
| 体积 | 轻量 (~43KB) | 中等 (~200KB) | 中等 (~300KB) | 按需加载 |
| Markdown 支持 | 不支持 | 支持 | 支持（三种模式） | 支持 |
| 实时预览 | 无 | 分栏/标签页 | 即时渲染 | 即时渲染 |
| 表格支持 | 基础 | 完善 | 完善 | 需插件 |
| Vue 3 集成 | 需手动封装 | 需手动封装 | 需手动封装 | 官方 Vue 插件 |
| 维护状态 | 活跃 | 活跃 | 活跃 | 活跃 |
| 学习曲线 | 低 | 中 | 中 | 高 |
| UI 颜值 | 中 | 中 | 高 | 高 |
| 适合场景 | 简单富文本 | 通用内容管理 | 知识库/博客 | 深度定制编辑器 |
选型建议
需求评估决策树：
只需要简单富文本？
└── 是 → Quill
└── 否 → 需要 Markdown 支持？
└── 是 → 需要高度可定制？
└── 是 → Milkdown
└── 否 → Vditor（推荐）
└── 否 → TuiEditor
text
课程推荐：Vditor
选择 Vditor 的理由：
- 三种编辑模式：即时渲染（IR）体验接近 Typora，所见即所得（WYSIWYG）适合非技术用户
- 功能完善：支持表格、数学公式、流程图、甘特图等扩展内容
- UI 美观：默认主题风格现代，暗黑模式支持良好
- 维护活跃：更新频繁，Bug 修复及时
- 中文友好：由国内开发者维护，中文文档完善
实践要点
- Quill 适合轻量级 WYSIWYG 场景，但不支持 Markdown 语法
- TuiEditor 功能全面，支持 Markdown + WYSIWYG 双模式
- Vditor 推荐作为通用内容管理编辑器，即时渲染模式体验优秀
- Milkdown 适合需要深度定制的插件化编辑器场景
- 选型时需综合考虑：功能需求、包体积、UI 要求、维护状态
↑